<div class="layout-wrapper">
    <div id="layout-sidebar" [ngClass]="{'active':mobileMenuActive}">
        <span class="layout-logo">
            <a href="#" class="sidebar-logo" [routerLink]="['/']">
                <i class="fa  left      fa-snowflake-o"></i>
            </a>
            <a href="#" id="menu-button-mobile" (click)="toggleMenu($event)" [ngClass]="{'active':mobileMenuActive}">
              <i class="fa  left      fa-snowflake-o"></i>
            </a>
        </span>

        <a id="menu_input" #inputmenutitle [class.active-menuitem]="inputmenutitle.id == activeMenuId" (click)="activeMenuId = inputmenutitle.id">
            <i class="fa  left      fa-snowflake-o"></i>
            <span>Input</span>
        </a>
        <div [ngClass]="{submenushow: (inputmenutitle.id == activeMenuId), 'submenuhide': (inputmenutitle.id != activeMenuId)}">
            <a [routerLink]="['/autocomplete']" (click)="mobileMenuActive = false">&#9679; AutoComplete</a>
            <a [routerLink]="['/calendar']" (click)="mobileMenuActive = false">&#9679; Calendar</a>
            <a [routerLink]="['/checkbox']" (click)="mobileMenuActive = false">&#9679; Checkbox</a>
            <a [routerLink]="['/chips']" (click)="mobileMenuActive = false">&#9679; Chips</a>
            <a [routerLink]="['/dropdown']" (click)="mobileMenuActive = false">&#9679; Dropdown</a>
            <a [routerLink]="['/editor']" (click)="mobileMenuActive = false">&#9679; Editor</a>
            <a [routerLink]="['/inputswitch']" (click)="mobileMenuActive = false">&#9679; InputSwitch</a>
            <a [routerLink]="['/inputtext']" (click)="mobileMenuActive = false">&#9679; InputText</a>
            <a [routerLink]="['/inputtextarea']" (click)="mobileMenuActive = false">&#9679; InputTextArea</a>
            <a [routerLink]="['/listbox']" (click)="mobileMenuActive = false">&#9679; Listbox</a>
            <a [routerLink]="['/inputmask']" (click)="mobileMenuActive = false">&#9679; Mask</a>
            <a [routerLink]="['/multiselect']" (click)="mobileMenuActive = false">&#9679; MultiSelect</a>
            <a [routerLink]="['/password']" (click)="mobileMenuActive = false">&#9679; Password</a>
            <a [routerLink]="['/radiobutton']" (click)="mobileMenuActive = false">&#9679; RadioButton</a>
            <a [routerLink]="['/rating']" (click)="mobileMenuActive = false">&#9679; Rating</a>
            <a [routerLink]="['/slider']" (click)="mobileMenuActive = false">&#9679; Slider</a>
            <a [routerLink]="['/spinner']" (click)="mobileMenuActive = false">&#9679; Spinner</a>
            <a [routerLink]="['/selectbutton']" (click)="mobileMenuActive = false">&#9679; SelectButton</a>
            <a [routerLink]="['/togglebutton']" (click)="mobileMenuActive = false">&#9679; ToggleButton</a>
            <a [routerLink]="['/tristatecheckbox']" (click)="mobileMenuActive = false">&#9679; TriStateCheckbox</a>
        </div>

        <a id="button_menutitle" #buttonmenutitle [class.active-menuitem]="buttonmenutitle.id == activeMenuId" (click)="activeMenuId = buttonmenutitle.id">
            <i class="fa  left      fa-snowflake-o"></i>
            <span>Button</span>
        </a>
        <div [ngClass]="{'submenushow': (buttonmenutitle.id == activeMenuId), 'submenuhide': (buttonmenutitle.id != activeMenuId)}">
            <a [routerLink]="['/button']" (click)="mobileMenuActive = false">&#9679; Button</a>
            <a [routerLink]="['/splitbutton']" (click)="mobileMenuActive = false">&#9679; SplitButton</a>
        </div>

        <a id="data_menutitle" #datamenutitle [class.active-menuitem]="datamenutitle.id == activeMenuId" (click)="activeMenuId = datamenutitle.id">
          <i class="fa  left      fa-snowflake-o"></i>
            <span>Data</span>
        </a>
        <div [ngClass]="{'submenushow': (datamenutitle.id == activeMenuId), 'submenuhide': (datamenutitle.id != activeMenuId)}">
            <a [routerLink]="['/carousel']" (click)="mobileMenuActive = false">&#9679; Carousel</a>
            <a [routerLink]="['/datagrid']" (click)="mobileMenuActive = false">&#9679; DataGrid</a>
            <a [routerLink]="['/datalist']" (click)="mobileMenuActive = false">&#9679; DataList</a>
            <a [routerLink]="['/datascroller']" (click)="mobileMenuActive = false">&#9679; DataScroller</a>
            <a [routerLink]="['/datatable']" (click)="mobileMenuActive = false">&#9679; DataTable</a>
            <a [routerLink]="['/orderlist']" (click)="mobileMenuActive = false">&#9679; OrderList</a>
            <a [routerLink]="['/gmap']" (click)="mobileMenuActive = false">&#9679; GMap</a>
            <a [routerLink]="['/paginator']" (click)="mobileMenuActive = false">&#9679; Paginator</a>
            <a [routerLink]="['/picklist']" (click)="mobileMenuActive = false">&#9679; PickList</a>
            <a [routerLink]="['/schedule']" (click)="mobileMenuActive = false">&#9679; Schedule</a>
            <a [routerLink]="['/tree']" (click)="mobileMenuActive = false">&#9679; Tree</a>
            <a [routerLink]="['/treetable']" (click)="mobileMenuActive = false">&#9679; TreeTable</a>
        </div>

        <a id="menu_panel" #panelmenutitle [class.active-menuitem]="panelmenutitle.id == activeMenuId" (click)="activeMenuId = panelmenutitle.id">
            <i class="fa  left      fa-snowflake-o"></i>
            <span>Panel</span>
        </a>
        <div [ngClass]="{'submenushow': (panelmenutitle.id == activeMenuId), 'submenuhide': (panelmenutitle.id != activeMenuId)}">
            <a [routerLink]="['/accordion']" (click)="mobileMenuActive = false">&#9679; Accordion</a>
            <a [routerLink]="['/fieldset']" (click)="mobileMenuActive = false">&#9679; Fieldset</a>
            <a [routerLink]="['/panel']" (click)="mobileMenuActive = false">&#9679; Panel</a>
            <a [routerLink]="['/grid']" (click)="mobileMenuActive = false">&#9679; Grid</a>
            <a [routerLink]="['/tabview']" (click)="mobileMenuActive = false">&#9679; TabView</a>
            <a [routerLink]="['/toolbar']" (click)="mobileMenuActive = false">&#9679; Toolbar</a>
        </div>

        <a id="menu_overlay" #overlaymenutitle [class.active-menuitem]="overlaymenutitle.id == activeMenuId" (click)="activeMenuId = overlaymenutitle.id">
          <i class="fa  left      fa-snowflake-o"></i>
            <span>Overlay</span>
        </a>
        <div [ngClass]="{'submenushow': (overlaymenutitle.id == activeMenuId), 'submenuhide': (overlaymenutitle.id != activeMenuId)}">
            <a [routerLink]="['/confirmdialog']" (click)="mobileMenuActive = false">&#9679; ConfirmDialog</a>
            <a [routerLink]="['/dialog']" (click)="mobileMenuActive = false">&#9679; Dialog</a>
            <a [routerLink]="['/lightbox']" (click)="mobileMenuActive = false">&#9679; Lightbox</a>
            <a [routerLink]="['/overlaypanel']" (click)="mobileMenuActive = false">&#9679; OverlayPanel</a>
            <a [routerLink]="['/tooltip']" (click)="mobileMenuActive = false">&#9679; Tooltip</a>
        </div>

        <a id="menu_file" #filemenutitle [class.active-menuitem]="filemenutitle.id == activeMenuId" (click)="activeMenuId = filemenutitle.id">
            <i class="fa  left      fa-snowflake-o"></i>
            <span>File</span>
        </a>
        <div [ngClass]="{'submenushow': (filemenutitle.id == activeMenuId), 'submenuhide': (filemenutitle.id != activeMenuId)}">
            <a [routerLink]="['/fileupload']" (click)="mobileMenuActive = false">&#9679; Upload</a>
        </div>

        <a id="menu_menu" #menumenutitle [class.active-menuitem]="menumenutitle.id == activeMenuId" (click)="activeMenuId = menumenutitle.id">
          <i class="fa  left      fa-snowflake-o"></i>
            <span>Menu</span>
        </a>
        <div [ngClass]="{'submenushow': (menumenutitle.id == activeMenuId), 'submenuhide': (menumenutitle.id != activeMenuId)}">
            <a [routerLink]="['/menumodel']" (click)="mobileMenuActive = false">&#9679; MenuModel</a>
            <a [routerLink]="['/breadcrumb']" (click)="mobileMenuActive = false">&#9679; Breadcrumb</a>
            <a [routerLink]="['/contextmenu']" (click)="mobileMenuActive = false">&#9679; ContextMenu</a>
            <a [routerLink]="['/megamenu']" (click)="mobileMenuActive = false">&#9679; MegaMenu</a>
            <a [routerLink]="['/menu']" (click)="mobileMenuActive = false">&#9679; Menu</a>
            <a [routerLink]="['/menubar']" (click)="mobileMenuActive = false">&#9679; Menubar</a>
            <a [routerLink]="['/panelmenu']" (click)="mobileMenuActive = false">&#9679; PanelMenu</a>
            <a [routerLink]="['/slidemenu']" (click)="mobileMenuActive = false">&#9679; SlideMenu</a>
            <a [routerLink]="['/steps']" (click)="mobileMenuActive = false">&#9679; Steps</a>
            <a [routerLink]="['/tabmenu']" (click)="mobileMenuActive = false">&#9679; TabMenu</a>
            <a [routerLink]="['/tieredmenu']" (click)="mobileMenuActive = false">&#9679; TieredMenu</a>
        </div>

        <a id="menu_chart" #chartmenutitle [class.active-menuitem]="chartmenutitle.id == activeMenuId" (click)="activeMenuId = chartmenutitle.id">
          <i class="fa  left      fa-snowflake-o"></i>
            <span>Charts</span>
        </a>
        <div [ngClass]="{'submenushow': (chartmenutitle.id == activeMenuId), 'submenuhide': (chartmenutitle.id != activeMenuId)}">
            <a [routerLink]="['/chart']" (click)="mobileMenuActive = false">&#9679; ChartModel</a>
            <a [routerLink]="['/chart/bar']" (click)="mobileMenuActive = false">&#9679; Bar</a>
            <a [routerLink]="['/chart/doughnut']" (click)="mobileMenuActive = false">&#9679; Doughnut</a>
            <a [routerLink]="['/chart/line']" (click)="mobileMenuActive = false">&#9679; Line</a>
            <a [routerLink]="['/chart/polararea']" (click)="mobileMenuActive = false">&#9679; PolarArea</a>
            <a [routerLink]="['/chart/pie']" (click)="mobileMenuActive = false">&#9679; Pie</a>
            <a [routerLink]="['/chart/radar']" (click)="mobileMenuActive = false">&#9679; Radar</a>
        </div>

        <a id="menu_messages" #messagesmenutitle [class.active-menuitem]="messagesmenutitle.id == activeMenuId" (click)="activeMenuId = messagesmenutitle.id">
            <i class="fa  left      fa-snowflake-o"></i>
            <span>Messages</span>
        </a>
        <div [ngClass]="{'submenushow': (messagesmenutitle.id == activeMenuId), 'submenuhide': (messagesmenutitle.id != activeMenuId)}">
            <a [routerLink]="['/messages']" (click)="mobileMenuActive = false">&#9679; Messages</a>
            <a [routerLink]="['/growl']" (click)="mobileMenuActive = false">&#9679; Growl</a>
        </div>

        <a id="menu_multimedia" #multimediamenutitle [class.active-menuitem]="multimediamenutitle.id == activeMenuId"
                (click)="activeMenuId = multimediamenutitle.id">
              <i class="fa  left      fa-snowflake-o"></i>
                <span>Multimedia</span>
        </a>
        <div [ngClass]="{'submenushow': (multimediamenutitle.id == activeMenuId), 'submenuhide': (multimediamenutitle.id != activeMenuId)}">
            <a [routerLink]="['/galleria']" (click)="mobileMenuActive = false">&#9679; Galleria</a>
        </div>

        <a id="menu_dnd" #dndmenutitle [class.active-menuitem]="dndmenutitle.id == activeMenuId"
                (click)="activeMenuId = dndmenutitle.id">
              <i class="fa  left      fa-snowflake-o"></i>
                <span>DragDrop</span>
        </a>
        <div [ngClass]="{'submenushow': (dndmenutitle.id == activeMenuId), 'submenuhide': (dndmenutitle.id != activeMenuId)}">
            <a [routerLink]="['/dragdrop']" (click)="mobileMenuActive = false">&#9679; Drag&amp;Drop</a>
        </div>

        <a id="menu_misc" #misctitle [class.active-menuitem]="misctitle.id == activeMenuId"
                (click)="activeMenuId = misctitle.id">
              <i class="fa  left      fa-snowflake-o"></i>
                <span>Misc</span>
        </a>
        <div [ngClass]="{'submenushow': (misctitle.id == activeMenuId), 'submenuhide': (misctitle.id != activeMenuId)}">
            <a [routerLink]="['/responsive']" (click)="mobileMenuActive = false">&#9679; Responsive</a>
            <a [routerLink]="['/rtl']" (click)="mobileMenuActive = false">&#9679; RTL</a>
            <a [routerLink]="['/defer']" (click)="mobileMenuActive = false">&#9679; Defer</a>
            <a [routerLink]="['/blockui']" (click)="mobileMenuActive = false">&#9679; BlockUI</a>
            <a [routerLink]="['/captcha']" (click)="mobileMenuActive = false">&#9679; Captcha</a>
            <a [routerLink]="['/inplace']" (click)="mobileMenuActive = false">&#9679; Inplace</a>
            <a [routerLink]="['/validation']" (click)="mobileMenuActive = false">&#9679; Validation</a>
            <a [routerLink]="['/theming']" (click)="mobileMenuActive = false">&#9679; Theming</a>
            <a [routerLink]="['/progressbar']" (click)="mobileMenuActive = false">&#9679; ProgressBar</a>
            <a [routerLink]="['/codehighlighter']" (click)="mobileMenuActive = false">&#9679; CodeHighlighter</a>
            <a [routerLink]="['/terminal']" (click)="mobileMenuActive = false">&#9679; Terminal</a>
        </div>
    </div>

    <div id="layout-content">
       <top></top>
        <div >
            <router-outlet></router-outlet>
        </div>
       <footer></footer>
    </div>

</div>
